import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Table,Pagination ,Input,Button,Modal,Row,Col,Popconfirm,Divider,message} from 'antd';
import styles from './index.less';
import {TimeSpan} from '../../utils';
const Pages = ({ ins, dispatch, loading }) => {
    const columns = [
        {
            title: '检查项⽬目录名称',
            dataIndex: 'name',
        },
        {
            title: '检查项⽬目录备注',
            dataIndex: 'descr',
        },
        {
            title: '创建时间',
            dataIndex: 'create_time',
            render:text=>TimeSpan(text),
        },
        {
            title: '操作',
            dataIndex: 'option',
            render: (text,record) =><div>
                {/* <Popconfirm title="确定移除?" onCancel={()=>{}} onConfirm={
                    ()=> dispatch({type:"ins/save",payload:{id:record.id}})
                } okText="是" cancelText="否">
                    <a style={{color:"red"}}>删除</a>
                </Popconfirm>
                <Divider type="vertical" /> */}
                <a onClick={()=>{
                    dispatch({type:"ins/save",payload:{record:record,visible:true}});
                }}>修改</a>
            </div>,
        },
    ];
    return(
        <div className={styles.container}>
            <PagesGET dispatch={dispatch} {...ins} loading={loading.global}/>
            <Table
                columns={columns}
                size="small"
                pagination={false}
                rowKey={id=>id.id}
                loading={loading.global}
                dataSource={ins.getInsData||null} />
            <Pagination current={ins.pages} showTotal={total => `共计 ${total} 条`}
                style={{float: 'right', margin: 10}} size="small" total={ins.total}
                onChange={pages => { !loading.global && dispatch({type:'inspep/inputOut',payload:{pages:pages}});}}/>
        </div>
    );
};


class PagesGET extends React.Component {

    constructor (props) {
        super(props);
        this.state = {
            name:"",
            nameADD:"",
            descrADD:"",
        };
    }
    // 实例化生命周期函数1
    componentWillMount () {
        //判断是否登录
        this.props.dispatch({type:"ins/getIns",payload:{
            name: "",
            pageNumber :1,
            pageSize :10,
        }});
    }

    render (){
        let {pages,dispatch,visible ,record,loading} = this.props;
        return(
            <div className={styles.containerit}>
                <Input value={this.state.name} placeholder="名称" style={{margin:10,width:256}} onChange={e=>this.setState({name:e.target.value})}/>
                <Button type='primary' onClick={()=>{
                    dispatch({type:"ins/getIns",payload:{
                        name:this.state.item_type,
                        pageNumber :pages,
                        pageSize :10,
                    }});
                }
                }>查询</Button>
                <Button style={{margin:10}} onClick={()=>
                    dispatch({type:"ins/save",payload:{visible:true}})
                }>新增检查项⽬目录</Button>
                <Modal
                    title={record.id?"修改检查项⽬录":'新增检查项⽬录'}
                    confirmLoading={loading}
                    visible={visible}
                    onOk={()=>{
                        let {nameADD,descrADD} = this.state;
                        if(nameADD && descrADD){
                            if (!record.id){
                                dispatch({type:"ins/postIns",payload:{
                                    name:this.state.nameADD,
                                    descr:this.state.descrADD,
                                }});
                            }else {
                                dispatch({type:"ins/putIns",payload:{
                                    id:record.id,
                                    name:this.state.nameADD,
                                    descr:this.state.descrADD,
                                }});
                            }
                        }else {
                            message.error('请填写完整！');
                        }
                    }}
                    onCancel={()=>dispatch({type:"ins/save",payload:{visible:false,record:{}}})}
                >
                    <Row>
                        <Col span={6}><span><span style={{color:'red'}}>*</span>目录名称:</span></Col>
                        <Col span={14}>
                            <Input style={{width: 300, marginBottom: 10, marginTop: -4}}
                                onChange={e => this.setState({nameADD: e.target.value})}
                                value={this.state.nameADD}
                                placeholder="目录名称"/>
                        </Col>
                        <Col span={6}><span><span style={{color:'red'}}>*</span>目录备注:</span></Col>
                        <Col span={14}>
                            <Input style={{width: 300, marginBottom: 10, marginTop: -4}}
                                onChange={e => this.setState({descrADD: e.target.value})}
                                value={this.state.descrADD}
                                placeholder="目录备注"/>
                        </Col>
                    </Row>
                </Modal>
            </div>
        );
    }
    componentWillReceiveProps (nextProps) {
        if(nextProps.pages !== this.props.pages){
            let {name} = this.state;
            this.props.dispatch({type:"ins/getIns",payload:{
                name: name,
                pageNumber :nextProps.pages ==0?1:nextProps.pages,
                pageSize :10,
            }});
        }
        if (nextProps.record.id !== this.props.record.id) {
            let {name,descr} = nextProps.record;
            this.setState({
                nameADD: name,
                descrADD:descr,
            });
        }
    }
}


Pages.propTypes = {
    inspep: PropTypes.object,
    loading: PropTypes.object,
    dispatch: PropTypes.func,
};

export default connect(({ ins, loading }) => ({ ins, loading }))(Pages);
